<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象字面量</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
	<!-- <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script> -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body >



<div id="app">
  <div v-demo:foo.bar="{ color: 'lightblue', text: 'hello!' }">

  </div>
</div>
<script type="text/javascript">




//函数简写对象字面量
Vue.directive('demo',function(el,binding){
  // binding.value.color="red";
  el.style.backgroundColor = binding.value.color;
  el.innerHTML = binding.value.text;
  console.log(binding.value.color);
  console.log(binding.value.text);
  console.log(binding.name);
  console.log(binding.expression);//绑定值的字符串形式
  console.log(binding.arg);//参数 
})
new Vue({
  el:'#app'
})
</script>


</body>
</html>


<!--
   钩子函数
   1.bind ：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
   2.inserted ： 被绑定的元素插入到父节点时调用，（父节点存在即可调用，不必存在于document中）
   3. update ： 被绑定元素所在的模板更新时对奥用，而不论绑定值是否变化。通过更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）
   4. componentUpdated : 被绑定元素所在模板完成一次更新周期时调用
   5.unbind：只调用一次，质量与元素解绑时调用

  接下来我们来看一下钩子函数的参数 (包括 el，binding，vnode，oldVnode) 。
-->


<!-- 钩子函数参数
  1.el：指令所绑定的元素，可以用来直接操作DOM
  2.binding ： 一个对象，可以包含以下属性：
    。name：指令名，不包括v- 前缀
    。value ：指令的绑定值 例如：v-my-directive="1 + 1",value的值是2
    。oldValue ： 指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
    。expression：绑定值的字符串形式。例如 v-my-directive ='1+1',express的值是"1+1"
    。arg： 传给指令的参数，例如v-mydirective:foo ,arg的值是"foo"
    。modifiers ：一个包含修饰符的对象。例如 v-my-directive.foo.bar,修饰符对象的modifiers的值是{foo:true,bar:true}。
  3.vnode:Vue编译生成的虚拟节点，查阅VNode API了解更多详情。
  4.odlVnode ：上一个虚拟节点，仅在update和compontentUpdated钩子中使用

-->